---
import sponsors from "@/config/sponsors.json";
---

<div class="not-content">
    <div class="container mx-auto py-6 text-sm leading-6">
        <div class="flex flex-wrap -mx-4">
            {sponsors.map(sponsor => (
                    <a href={sponsor.link} class="w-full md:w-1/3 mt-4 px-4 no-underline text-current hover:no-underline" target="_blank">
                        <figure class="relative flex flex-col-reverse border rounded-lg p-6 dark:bg-slate-800 dark:highlight-white/5 transform transition hover:-translate-y-2.5 h-full">
                            <blockquote class="dark:text-gray-300 flex-1">
                                <p>{sponsor.description}</p>
                            </blockquote>
                            <figcaption class="flex items-center space-x-4">
                                <img src={sponsor.logo} alt="" class="flex-none w-14 h-14 object-contain" loading="lazy" decoding="async">
                                <div class="flex-auto">
                                    <div class="text-base font-semibold dark:text-slate-200">
                                        {sponsor.title}
                                    </div>
                                    <div class="mt-0.5 dark:text-slate-300">
                                        {sponsor.subtitle}
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </a>
            ))}
        </div>
        <div class="flex justify-center mt-5 transform transition hover:-translate-y-2.5">
            <a href="/resources/support" class="border dark:text-slate-50 font-bold py-2 px-8 rounded-full no-underline text-current hover:no-underline">
                成为赞助商
            </a>
        </div>
    </div>
</div>
